import React, { FC, useState } from "react";
import {
  Button,
  Typography,
  Space,
  Divider,
  Tag,
  Popconfirm,
  message,
} from "antd";
import { Link, useNavigate } from "react-router-dom";
import {
  EditOutlined,
  LineChartOutlined,
  StarOutlined,
  DeleteOutlined,
  CopyOutlined,
} from "@ant-design/icons";
import style from "./QuestionCard.module.scss";
import { useRequest } from "ahooks";
import { updataIsStarOrDelt ,copyQuestion } from "../services/question";

type PropsType = {
  _id: string;
  title: string;
  isPublished: boolean;
  isStar: boolean;
  answerCount: number;
  createAt: string;
};

const { Title } = Typography;

const QuestionCardAntUi: FC<PropsType> = (props) => {
  const nav = useNavigate();
  const { _id, title, isPublished, isStar, answerCount, createAt } = props;

  const [star, setStar] = useState(isStar);
  const { loading: setStarLoading, run: runStar } = useRequest(
    async () => {
      const data = await updataIsStarOrDelt(_id, { isStar: !star });
      return data;
    },
    {
      manual: true,
      onSuccess() {
        setStar(!star);
        message.success("标星执行成功");
      },
    }
  );

  // 标星
  function changeStar() {
    runStar();
  }

  // 复制
  // function copyItm() {
  //   message.success("复制成功");
  // }
  const {loading : copyLoading , run : copyItm} = useRequest(async () => {
    const data = await copyQuestion(_id)
    return data
  }, {
    manual : true,
    onSuccess(result){
      // result 为上面返回的data
      message.success('复制完成')
      // 复制完成后跳转到编辑页
      nav(`/question/edit/${result.id}`)
    }
  })

  // 删除 -- 状态控制被删除的卡片不展示：因为mock数据所以前端做，实际开发要重新请求列表数据，重新渲染
  const [isDeleted , setIsDeleted] = useState(false)
  const {loading : deletLoading , run : deleteItm} = useRequest(async () => {
    return await updataIsStarOrDelt(_id , {isDelete : false})
  },{
    manual : true,
    onSuccess(){
      message.success('删除成功')
      setIsDeleted(true)
    }
  })

  if(isDeleted) return null
  return (
    <div className={style.container}>
      <div className={style.title}>
        <div className={style.left}>
          <Link
            to={isPublished ? `/question/stat/${_id}` : `/question/edit/${_id}`}
          >
            <Space>
              {star && <StarOutlined style={{ color: "red" }} />}
              <Title level={3}>{title}</Title>
              {/* {title} */}
            </Space>
          </Link>
        </div>

        <div className={style.right}>
          <Space>
            {isPublished ? (
              <Tag color="#87d068">已发布</Tag>
            ) : (
              <Tag color="#f50">未发布</Tag>
            )}
            <Title level={4}>答卷： {answerCount}</Title>
            <Title level={5}>{createAt}</Title>
          </Space>
        </div>
      </div>
      <Divider style={{ margin: " 12px 0" }} />
      <div className={style["button-container"]}>
        <div className={style.left}>
          <Space>
            <Button
              size="small"
              type="default"
              icon={<EditOutlined />}
              onClick={() => {
                nav(`/question/stat/${_id}`);
              }}
            >
              编辑问卷
            </Button>
            <Button
              size="small"
              type="default"
              icon={<LineChartOutlined />}
              onClick={() => {}}
            >
              统计问卷
            </Button>
          </Space>
        </div>
        <div className={style.right}>
          <Space>
            <Popconfirm
              title="确定标星吗？"
              okText="确定"
              cancelText="取消"
              onConfirm={changeStar}
            >
              <Button
                size="small"
                type="text"
                disabled={setStarLoading}
                icon={<StarOutlined />}
                onClick={() => {}}
              >
                {star ? <span>取消标星</span> : <span>标星</span>}
              </Button>
            </Popconfirm>

            <Popconfirm
              title="确认复制吗？"
              okText="确认"
              cancelText="取消"
              onConfirm={copyItm}
            >
              <Button
                size="small"
                type="text"
                icon={<CopyOutlined />}
                disabled={copyLoading}
                onClick={() => {}}
              >
                复制
              </Button>
            </Popconfirm>

            <Popconfirm
              title="确认删除吗"
              okText="确认"
              cancelText="取消"
              onConfirm={deleteItm}
            >
              <Button
                size="small"
                type="text"
                icon={<DeleteOutlined />}
                onClick={() => {}}
                disabled={deletLoading}
              >
                删除
              </Button>
            </Popconfirm>
          </Space>
        </div>
      </div>
    </div>
  );
};

export default QuestionCardAntUi;
